<template>
  <!-- 已有项目 -->
  <div class="all">
    <div class="all_top">
      <div class="all_top_one">
        <span>
          <select class="all_top_select" v-model="title" @change="select">
            <option v-for="item of areaClass" :key="item.id" :value="item.id">
              {{ item.name }}
            </option>
          </select>
        </span>
      </div>
      <div class="all_top_two">
        <span>
          <div style="position: relative; height: 5vh; margin-top: 5%">
            <input
              class="top_two_inp"
              placeholder="按名称搜索"
              type="text"
              v-model="projectName"
            />
            <button class="two_but" @click="nameSearch">
              搜&nbsp;&nbsp;&nbsp;索
            </button>
            <div
              style="
                position: absolute;
                left: 12vw;
                height: 5vh;
                border-top-right-radius: 5vh;
                border-bottom-right-radius: 5vh;
                width: 2vw;
                border-top: 1px solid #d2d6e1;
                border-bottom: 1px solid #d2d6e1;
                box-sizing: border-box;
                background-color: #fff;
              "
            ></div>
          </div>
        </span>
      </div>
      <div class="all_top_three">
        <span>
          <div style="position: relative; height: 5vh; margin-top: 5%">
            <input
              class="top_two_inp"
              placeholder="按面积搜索"
              type="text"
              v-model="floorSpace"
            />
            <button class="two_but2" @click="floorSpaceSearch">
              搜&nbsp;&nbsp;&nbsp;索
            </button>
            <div
              style="
                position: absolute;
                left: 12vw;
                height: 5vh;
                border-top-right-radius: 5vh;
                border-bottom-right-radius: 5vh;
                width: 2vw;
                border-top: 1px solid #d2d6e1;
                border-bottom: 1px solid #d2d6e1;
                box-sizing: border-box;
                background-color: #fff;
              "
            ></div>
          </div>
        </span>
      </div>
    </div>
    <div class="all_body">
      <dl
        v-for="(item, index) of areaList"
        :key="index"
        class="body_dl"
        @click="gsxq(item)"
      >
        <dt>
          <!-- 要渲染的图片 -->
          <img
            class="body_img"
            :src="`http://139.224.69.209${item.imgList[0]}`"
            alt=""
          />
        </dt>
        <dd>
          <span style="color: #4b799f; font-size: 1.8vh">{{
            item.projectName
          }}</span>
          <span style="color: #adadac; transform: scale(0.5); font-size: 1vh"
            >（{{ item.projectName }}&nbsp;&nbsp;面积{{
              item.floorSpace
            }}万平方米）</span
          >
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { GetData } from "@/api/index";

import {  useRouter } from 'vue-router';

export default {
  setup() {
    onMounted(() => {
      GetareaList();
      // aa()
      GetareaClass();
    });
    const title = ref("1560888431279255553");
    const areaList = ref({});
    // 项目名称
    const projectName = ref("");
    // 面积
    const floorSpace = ref("");
    // 按名称搜索
    const nameSearch = () => {
      GetareaList();
    };
    // 按面积搜索
    const floorSpaceSearch = () => {
      GetareaList();
    };
    const GetareaList = async () => {
      console.log(title.value);
      let res = await GetData(
        `/getProjectPage?pageNum=1&pageSize=10&typeId=1575022654739161089&areaId=${title.value}&projectName=${projectName.value}&floorSpace=${floorSpace.value}`
      );
      console.log(res, 1111111);
      areaList.value = res.records;
    };

    const areaClass = ref([]);
    const GetareaClass = async () => {
      let res = await GetData("/getTypeList?type=QYT");
      areaClass.value = res;
      console.log(res);
    };

    const select = (e) => {
      title.value = e.target.value;
      projectName.value = "";
      floorSpace.value = "";
      GetareaList();
    };
    
    const router=useRouter()
    const gsxq = async (item) => {
    router.push(`/gsxq?id=${item.id}`)
      
    };
    return {
      areaList,
      areaClass,
      select,
      title,
      nameSearch,
      projectName,
      floorSpaceSearch,
      floorSpace,
      gsxq,
    };
  },
};
</script>

<style scoped>
.all {
  height: 100%;
}

.all_top {
  height: 10vh;
  line-height: 10vh;
  padding: 0 0.8vw 0 0.8vw;
  display: flex;
}

.all_top_one {
  flex: 1;
}

.all_top_two {
  flex: 1;
}

.all_top_three {
  flex: 1;
}

.all_top_select {
  height: 5vh;
  border: 1px solid #d2d6e1;
  width: 13vw;
  /*取消默认箭头开始*/
  outline: none;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /*取消默认箭头结束*/
  padding: 0 0 0 1vh;
  color: #72aacd;
  background: url(../assets/imgs/select_img.png) no-repeat right 0.5rem center;
}

.top_two_inp {
  background-image: url(../assets/imgs/seach.png);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 1vh;
  height: 5vh;
  width: 13vw;
  border: 1px solid #d2d6e1;
  outline: none;
  float: left;
  /* margin-top: 5%; */
  padding: 0 0 0 2vw;
  box-sizing: border-box;
  border-top-left-radius: 5vh;
  border-bottom-left-radius: 5vh;
}

.two_but {
  background-color: #2e6995;
  height: 5vh;
  width: 5vw;
  outline: none;
  float: left;
  color: #fff;
  /* margin-top: 5%; */
  border-top-right-radius: 5vh;
  border-bottom-right-radius: 5vh;
}

.two_but2 {
  background-color: #479ef7;
  border: 1px solid #479ef7;
  height: 5vh;
  width: 5vw;
  outline: none;
  float: left;
  color: #fff;
  /* margin-top: 5%;     */
  border-top-right-radius: 5vh;
  border-bottom-right-radius: 5vh;
}

.all_body {
  display: flex;
  flex-wrap: wrap;
}

.body_dl {
  border: 1px solid #6494ab;
  padding: 1vh;
  margin-left: 0.8vw;
  margin-top: 0.8vw;
  box-sizing: border-box;
  width: 47%;
}

.body_img {
  height: 30vh;
  width: 100%;
}
</style>